<template>
  <ul class="menu" v-bind:style="styleObject" v-bind:class="classObject" v-on:click.stop>
    <MyMenuItem v-for="(item, index) in items" v-bind:item="item" :index="index" :isActive="activeItemIndex === index" :deactivate="handleDeactivate" v-on:toggleActive="handleToggleActive"
      :context="context" />
  </ul>
</template>
<script>
  import MyMenuItem from './menu-item.vue'

  export default {
    componentName: 'Menu',
    components: {
      MyMenuItem
    },
    data: function () {
      return {
        activeItemIndex: -1
      }
    },
    props: {
      items: {
        required: true
      },
      context: Object,
      classObject: Object,
      styleObject: Object
    },
    methods: {
      handleToggleActive: function (itemIndex) {
        if (this.activeItemIndex === itemIndex) {
          this.activeItemIndex = -1
        } else {
          this.activeItemIndex = itemIndex
        }
      },
      handleDeactivate: function () {
        this.$emit('mydeactivate')
      }
    },
    mounted: function () {
      if (this.handleDeactivate)
        window.addEventListener('click', this.handleDeactivate)
    },
    destroyed: function () {
      if (this.handleDeactivate)
        window.removeEventListener('click', this.handleDeactivate)
    }
  }

</script>
